<template>
    <div class="list">
        <h2 class="tit">“{{ nick }}”公众号</h2>
        <div class="main">
            <div class="select" v-for="(item, index) in list" :key="index">
                <h2 class="title">{{ item.name }}</h2>
                <div class="all">
                    <div
                        class="item"
                        v-for="(items, oindex) in item.child"
                        :key="oindex"
                    >
                        <div
                            class="tdiv"
                            :class="{
                                topborder: items.menuName == '家庭医生',
                                bottomborder:
                                    items.menuName == '报告查询' ||
                                    items.menuName == '处方订单',
                            }"
                        >
                        <p class="content">
                            <input
                                    type="checkbox"
                                    name="checkBoxTest"
                                    v-model="items.flag"
                                    @change="
                                        handleBeforeChange(
                                            items.flag,
                                            item.name,
                                            oindex,
                                            99,
                                            items
                                        )
                                    "
                                />{{items.menuName}}
                            </P>
                            <!-- 排序 -->
                            <div class="sort fdiv">
                                <span>排序</span>
                                <InputNumber
                                    :min="1"
                                    :max="999"
                                    v-model="items.priority"
                                    style="width: 100px"
                                ></InputNumber>
                            </div>
                            <div class="sort fdiv" v-show="items.shouswitch">
                                <input
                                    type="checkbox"
                                    name="checkBoxTest"
                                    v-model="items.shortcutFlag"
                                    @change="
                                        handleBeforeChange(
                                            items.shortcutFlag,
                                            item.name,
                                            oindex
                                        )
                                    "
                                />&nbsp;热区功能
                            </div>
                        </div>
                        <div
                            class="tdiv"
                            v-for="(ite, tindex) in items.threeLevel"
                            :key="tindex"
                        >
                            <p class="tpad">
                                <input
                                    type="checkbox"
                                    name="checkBoxTest"
                                    v-model="ite.flag"
                                />{{ite.menuName}}
                            </p>
                            <!-- 排序 -->
                            <div
                                class="sort fdiv"
                                v-show="ite.menuName !== '我的icon'"
                            >
                                <span>排序</span>
                                <InputNumber
                                    :min="1"
                                    :max="999"
                                    v-model="ite.priority"
                                    style="width: 100px"
                                ></InputNumber>
                            </div>
                            <!-- 快捷菜单 v-model="items.shortcutFlag"-->
                            <div
                                class="sort fdiv"
                                v-show="ite.menuName !== '我的icon'"
                            >
                                <input
                                    type="checkbox"
                                    name="checkBoxTest"
                                    v-model="ite.shortcutFlag"
                                    @change="
                                        handleBeforeChange(
                                            ite.shortcutFlag,
                                            item.name,
                                            oindex,
                                            tindex
                                        )
                                    "
                                />&nbsp;热区功能
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_save">
            <Button type="primary" @click="save">
                <Icon
                    type="ios-checkmark"
                    style="margin-right: 5px"
                    size="18"
                />保存
            </Button>
            <Button @click="back">
                <i
                    class="iconfont icon-butongyi icon"
                    style="font-size: 14px; margin-right: 5px"
                ></i
                >取消
            </Button>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
    data() {
        return {
            nick: "",
            appid: "",
            list: [],
        };
    },
    created() {
        this.nick = localStorage.getItem("nick");
        let iv = store.state.iv;
        let salt = store.state.salt;
        this.appid = aesUtils.decrypt(
            salt,
            iv,
            "wxAppid",
            localStorage.getItem("appid")
        );
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/WXMenu/list",
                title: "微信菜单配置",
            },
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        //查询公众号菜单列表
        this.$axios
            .post(api.findWxMenuList, {
                appid: this.appid,
            })
            .then((res) => {
                if (res.data.code) {
                    let ret = res.data;
                    this.list = ret.object;
                    this.list.forEach((item) => {
                        if (item.child) {
                            item.child.forEach((items, index) => {
                                //因为首页和我的里边都有"慢病服务"，所以此处需要用判断来控制是否有‘热区功能’选择框
                                if(item.name == '首页') {
                                    if (
                                        items.menuName == "logo名称" ||
                                        items.menuName == "Banner" ||
                                        items.menuName == "家庭医生" ||
                                        items.menuName == "预约挂号" ||
                                        items.menuName == "诊间缴费" ||
                                        items.menuName == "报告查询" ||
                                        items.menuName == "就医指南" ||
                                        items.menuName == "慢病服务"
                                    ) {
                                        items.shouswitch = false;
                                    } else {
                                        items.shouswitch = true;
                                    }
                                }
                                if(item.name == '我的') {
                                    if (  
                                        items.menuName == "预约订单" ||
                                        items.menuName == "在线问诊" ||
                                        items.menuName == "处方订单"
                                    
                                    ) {
                                        items.shouswitch = false;
                                    } else {
                                        items.shouswitch = true;
                                    }
                                }
                                items.flag = Boolean(Number(items.open));
                                items.shortcutFlag = Boolean(items.shortcut);
                                items.ipayFlag = Boolean(Number(items.ipay));
                                if (items.threeLevel) {
                                    items.threeLevel.forEach((ite, index) => {
                                        ite.flag = Boolean(Number(ite.open));
                                        ite.shortcutFlag = Boolean(
                                            ite.shortcut
                                        );
                                        ite.ipayFlag = Boolean(
                                            Number(ite.ipay)
                                        );
                                    });
                                }
                            });
                        }
                    });
                } else {
                    this.$Message.error(res.data.message);
                }
            });
    },
    methods: {
        handleChange(items, index) {
            this.list[1].child[5].shortcut = 1;
            this.list[1].child[5].shortcutFlag = true;
            let num = this.list[1].child.filter(
                (item) => item.shortcutFlag === true
            );
            if (num.length > 3) {
                console.log(num);
                // 	items.shortcutFlag = false
                // 	this.$Message.error('多了')
                // 	console.log(this.list[1].child)
            }
        },
        handleBeforeChange(el, al, index, tindex,aitems) {
            let a = 0;
            let b = 0;
            let c = 0;
            let d = 0;
            console.log(el, al, index, tindex);
            this.list.forEach((item) => {
                if (item.child) {
                    item.child.forEach((items) => {
                        // console.log(items.menuName=='家庭医生',items.open,!items.open)
                        if (
                            (item.name == "首页" &&
                                items.menuName == "家庭医生" &&
                                !items.flag) ||
                            (items.menuName == "预约挂号" && !items.flag) ||
                            (items.menuName == "诊间缴费" && !items.flag) ||
                            (items.menuName == "报告查询" && !items.flag)
                        ) {
                            a = a + 1;
                        }
                        if (
                            item.name == "首页" &&
                            items.menuName != "家庭医生" &&
                            items.menuName != "预约挂号" &&
                            items.menuName != "Banner" &&
                            items.menuName != "logo名称" &&
                            items.menuName != "诊间缴费" &&
                            items.menuName != "报告查询"
                        ) {
                            if (items.shortcutFlag) {
                                c = c + 1;
                                // console.log(c, items.menuName);
                            }
                            if (items.menuName == "就医指南") {
                                items.threeLevel.forEach((ite) => {
                                    if (ite.shortcutFlag) {
                                        c = c + 1;
                                    }
                                });
                            }
                        }

                        if (
                            (item.name == "我的" &&
                                items.menuName == "预约订单" &&
                                !items.flag) ||
                            (items.menuName == "在线问诊" && !items.flag) ||
                            (items.menuName == "处方订单" && !items.flag)
                        ) {
                            b = b + 1;
                        }
                        if (
                            item.name == "我的" &&
                            items.menuName != "预约订单" &&
                            items.menuName != "在线问诊" &&
                            items.menuName != "处方订单"
                        ) {
                            if (items.shortcutFlag) {
                                d = d + 1;
                            }
                        }
                    });
                }
            });
            this.$nextTick(() => {
                console.log(al, a, b, c, d);
                let _this = this;
                if (el) {
                    // console.log(a,c,aitems.menuName,b,d)
                    console.log(b,d,((3-b)+d),)
                    if(tindex==99&&al == "首页" &&((a==0&&c==0)||(4-a)+c==4)){
                        if( aitems.menuName == "家庭医生" ||
                            aitems.menuName == "预约挂号" ||
                            aitems.menuName == "诊间缴费" ||
                            aitems.menuName == "报告查询")
                        {
                            // _this.$Message.success("设置成功");
                            console.log('qazxsw',_this.list[0].child[index])
                            _this.list[0].child[index].shortcutFlag = true;
                        }else{
                            _this.list[0].child[index].shortcutFlag = false;
                        }
                        _this.$forceUpdate();
                    }else if(tindex==99&&al == "我的" &&((b==0&&d==1)||(3-b)+d==4)){
                        console.log(aitems.menuName,b,d)
                        if(aitems.menuName == "预约订单" ||
                            aitems.menuName == "在线问诊" ||
                            aitems.menuName == "处方订单")
                        {
                            // _this.$Message.success("设置成功");
                            _this.list[1].child[index].shortcutFlag = true;
                            _this.$forceUpdate();
                        }else{
                            _this.list[1].child[index].shortcutFlag = false;
                            _this.$forceUpdate();
                        }
                    }else if (al == "首页" && c <= a && a != 0) {
                        // _this.$Message.success("设置成功");
                        // resolve();
                        if(tindex||tindex==0){
                            _this.list[0].child[index].threeLevel[tindex].shortcutFlag = true;
                            _this.list[0].child[index].threeLevel[tindex].shortcut = 1;
                            _this.$forceUpdate();
                        }else{
                            _this.list[0].child[index].shortcutFlag = true;
                            _this.list[0].child[index].shortcut = 1;
                            _this.$forceUpdate();
                        }
                    } else if (al == "首页") {
                        _this.$Message.error(
                            "热区最多可选择4个，请减少当前热区后操作"
                        );
                        console.log(tindex)
                        if (tindex || tindex == 0) {
                            if(tindex==99){
                                _this.list[0].child[index].open = '0';
                                _this.list[0].child[index].flag = false;
                                _this.$forceUpdate();
                            }else{
                                _this.list[0].child[index].threeLevel[
                                    tindex
                                ].shortcut = 0;
                                _this.list[0].child[index].threeLevel[
                                    tindex
                                ].shortcutFlag = false;
                                _this.$forceUpdate();
                                console.log( _this.list[0].child[index].threeLevel[tindex])
                            }
                        } else {
                            console.log(_this.list[0].child[index].shortcutFlag);
                            _this.list[0].child[index].shortcut = 0;
                            _this.list[0].child[index].shortcutFlag = false;
                            _this.$forceUpdate();
                        }
                        //刷新
                        // console.log(
                        //     _this.list[0],
                        //     _this.list[0].child[index],
                        //     index,
                        //     tindex
                        // );
                    } else if (al == "我的" && d <= b+1 ) {
                        // _this.$Message.success("设置成功");
                        _this.list[1].child[index].shortcutFlag = true;
                        // resolve();
                    } else if (al == "我的") {
                        _this.$Message.error(
                            "热区最多可选择4个，请减少当前热区后操作"
                        );
                        if(tindex==99){
                            _this.list[1].child[index].open = '0';
                            _this.list[1].child[index].flag = false;
                            _this.$forceUpdate();
                        }else{
                            _this.list[1].child[index].shortcutFlag = false;
                            _this.$forceUpdate(); //刷新
                        }
                        // console.log(this.list,);
                    }
                }
            });
            console.log(this.list,);
        },
        // 保存修改公众号菜单
        save() {
            let changeList = [];
            console.log(this.list)
            this.list.forEach((item) => {
                if (item.child) {
                    item.child.forEach((items) => {
                        if (items.flag) {
                            changeList.push({
                                menuid: items.id,
                                open: "1",
                                priority: items.priority,
                                prentId: items.prentId,
                                ipay: Number(items.ipayFlag),
                                shortcut: Number(items.shortcutFlag).toString(),
                            });
                        }
                        if(items.threeLevel){
                            items.threeLevel.forEach((ite) => {
                                // if (ite.flag) {
                                    changeList.push({
                                        menuid: ite.id,
                                        open: ite.flag?"1":"0",
                                        priority: ite.priority,
                                        prentId: ite.prentId,
                                        ipay: Number(ite.ipayFlag),
                                        shortcut: Number(ite.shortcutFlag).toString(),
                                    });
                                // }
                            })
                        }
                    });
                }
            });
            if (!changeList.length) {
                this.$Message.error("请选择服务项");
                return;
            }
            let params = {
                appid: this.appid,
                list: changeList,
            };
            this.$axios.post(api.updateWxMenuList, params).then((res) => {
                if (res.data.code) {
                    this.$Message.success("保存成功");
                    this.back();
                } else {
                    this.$Message.error(res.data.message);
                }
            });
        },
        // 返回
        back() {
            let pageNo = this.$route.query.pageNo;
            // FUNCTIONJS公用 跳转方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/WXMenu/list",
                {
                    pageNo,
                }
            );
        },
    },
};
</script>
<style lang="less" scoped>
.list {
    width: calc(100%);
    padding: 10px 30px;
    padding-bottom: 50px;
    margin: 0 auto;
    background: #fff;
    .tit {
        margin: 15px 0;
        font-weight: bold;
        text-align: center;
        color: #333;
    }
    .main {
        position: relative;
        width: 100%;
        margin-top: 10px;
        .select {
            margin: 20px;
            border: 1px solid #f0f0f0;
            box-shadow: 0 4px 3px #ebedf8;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            padding-bottom: 10px;
            .title {
                font-size: 18px;
                padding-left: 15px;
                color: #333;
                height: 40px;
                line-height: 40px;
                background: #ebedf8;
                font-weight: 600;
                margin-bottom: 10px;
            }
            .all {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex-wrap: wrap;
                .item {
                    width: 98%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    line-height: 40px;
                    // justify-content: space-around;
                    .content {
                        width: 130px;
                    }
                    .tpad {
                        width: 130px;
                        padding-left: 3%;
                    }
                    .topborder {
                        padding-top: 20px;
                        border-top: 1px solid #999;
                    }
                    .bottomborder {
                        padding-bottom: 20px;
                        border-bottom: 1px solid #999;
                    }
                    .fdiv {
                        padding-left: 10%;
                        // .iSwitch{
                        // 	pointer-events:none
                        // }
                        input[type="checkbox"] {
                            width: 15px;
                            height: 15px;
                            position: relative;
                            top: 3px;
                            border: 1px solid #f5f5f5;
                        }
                    }
                    .tdiv {
                        width: 48%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        line-height: 40px;
                        // justify-content: space-around;
                    }
                }
            }
        }
    }
    .main_save {
        text-align: center;
    }
}
</style>
